import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/components/calendar_btn_icon.dart';
import 'package:share_fit/app/components/date_type_bar.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/generated/locales.g.dart';

import 'logic.dart';

class FatiguePage extends StatelessWidget {
  FatiguePage({Key? key}) : super(key: key);

  final logic = Get.find<FatigueLogic>();
  final state = Get.find<FatigueLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: BackBtnIcon(onTap: () => logic.goBack()),
        actions: [
          CalendarBtnIcon(onTap: () => Get.dialog(_buildShowDatePicker(context))),
        ],
      ),
      body: Container(
        padding: EdgeInsets.only(left: 40.w, right: 40.w),
        child: ListView(
          children: [
            SizedBox(height: 96.h),
            GetBuilder<FatigueLogic>(
              id: 'date_type_bar',
              builder: (ctrl) => DateTypeBar(
                initIndex: ctrl.state.dateTypeBarIndex,
                onSelectChanged: (index, dateType) => ctrl.changeDateType(selectedIndex: index, type: dateType),
              ),
            ),
            SizedBox(height: 96.h),
            _buildChartContainer(),
            SizedBox(height: 96.h),
            _buildTipContainer(),
            SizedBox(height: 96.h),
            _buildFreeEnergyContainer(),
            SizedBox(height: 96.h),
            _buildCycleRateContainer(),
            SizedBox(height: 96.h),
          ],
        ),
      ),
    );
  }

  _buildCycleRateContainer() {
    return Column(
      children: [
        Row(
          children: [
            Container(
              width: 15.w,
              height: 65.h,
              decoration: BoxDecoration(color: Colors.amberAccent, borderRadius: BorderRadius.circular(8.r)),
            ),
            SizedBox(width: 19.h),
            GetBuilder<FatigueLogic>(
              id: 'fatigue_date_type',
              builder: (_) {
                return Text(logic.getCycleRadioTitle(), style: TextStyle(fontSize: 54.sp));
              },
            ),
          ],
        ),
        SizedBox(height: 49.h),
        Container(
          height: 220.h,
          padding: EdgeInsets.symmetric(vertical: 50.h, horizontal: 50.w),
          decoration: BoxDecoration(color: Colors.white70, borderRadius: BorderRadius.circular(40.r)),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              LinearProgressIndicator(
                minHeight: 20.h,
                backgroundColor: Colors.grey,
                valueColor: const AlwaysStoppedAnimation(Colors.lightBlueAccent),
                value: 0.4,
                borderRadius: BorderRadius.circular(8.r),
              ),
              LinearProgressIndicator(
                minHeight: 20.h,
                backgroundColor: Colors.grey,
                valueColor: const AlwaysStoppedAnimation(Colors.amberAccent),
                value: 0.4,
                borderRadius: BorderRadius.circular(8.r),
              ),
            ],
          ),
        ),
      ],
    );
  }

  _buildFreeEnergyContainer() {
    return Column(
      children: [
        Row(
          children: [
            Container(
              width: 15.w,
              height: 65.h,
              decoration: BoxDecoration(color: Colors.amberAccent, borderRadius: BorderRadius.circular(8.r)),
            ),
            SizedBox(width: 19.h),
            Text('当前剩余能量', style: TextStyle(fontSize: 54.sp)),
          ],
        ),
        SizedBox(height: 49.h),
        Container(
          height: 420.h,
          padding: EdgeInsets.only(left: 150.w),
          decoration: BoxDecoration(color: Colors.white70, borderRadius: BorderRadius.circular(60.r)),
          child: Row(
            children: [
              SizedBox(
                height: 250.h,
                width: 250.w,
                child: CircularProgressIndicator(
                  strokeWidth: 45.w,
                  strokeCap: StrokeCap.round,
                  backgroundColor: Colors.green.withOpacity(0.3),
                  valueColor: const AlwaysStoppedAnimation(Colors.greenAccent),
                  value: 1.0,
                ),
              ),
              SizedBox(width: 143.h),
              Text('92%', style: TextStyle(fontSize: 54.sp)),
            ],
          ),
        )
      ],
    );
  }

  _buildChartContainer() {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 60.h, horizontal: 60.w),
      decoration: BoxDecoration(color: Colors.white70, borderRadius: BorderRadius.circular(60.r)),
      constraints: BoxConstraints.expand(height: 800.h),
      child: Column(
        children: [
          Container(
            height: 560.h,
            // color: Colors.amber,
            child: Text('柱状图'),
          ),
          SizedBox(height: 40.h),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Container(
                    decoration: BoxDecoration(color: Colors.amberAccent, borderRadius: BorderRadius.circular(8.r)),
                    width: 42.w,
                    height: 42.h,
                  ),
                  SizedBox(width: 20.w),
                  Text('高'),
                ],
              ),
              Row(
                children: [
                  Container(
                    decoration: BoxDecoration(color: Colors.lightBlueAccent, borderRadius: BorderRadius.circular(8.r)),
                    width: 42.w,
                    height: 42.h,
                  ),
                  SizedBox(width: 20.w),
                  Text('中等'),
                ],
              ),
              Row(
                children: [
                  Container(
                    decoration: BoxDecoration(color: Colors.blue, borderRadius: BorderRadius.circular(8.r)),
                    width: 42.w,
                    height: 42.h,
                  ),
                  SizedBox(width: 20.w),
                  Text('低'),
                ],
              ),
            ],
          )
        ],
      ),
    );
  }

  _buildTipContainer() {
    return Column(
      children: [
        Row(
          children: [
            Container(
              width: 15.w,
              height: 65.h,
              decoration: BoxDecoration(color: Colors.amberAccent, borderRadius: BorderRadius.circular(8.r)),
            ),
            SizedBox(width: 19.h),
            Text('疲劳度提醒', style: TextStyle(fontSize: 54.sp)),
          ],
        ),
        SizedBox(height: 49.h),
        Container(
          alignment: Alignment.center,
          height: 420.h,
          padding: EdgeInsets.only(left: 82.w),
          decoration: BoxDecoration(color: Colors.white70, borderRadius: BorderRadius.circular(60.r)),
          child: Stack(
            // fit: StackFit.expand,
            alignment: Alignment.center,
            children: [
              SizedBox(
                height: 250.h,
                width: 250.w,
                child: CircularProgressIndicator(
                  strokeWidth: 45.w,
                  strokeCap: StrokeCap.round,
                  backgroundColor: Colors.green.withOpacity(0.3),
                  valueColor: const AlwaysStoppedAnimation(Colors.greenAccent),
                  value: 1.0,
                ),
              ),
              Text('注意休息/注意休息', style: TextStyle(fontSize: 54.sp)),
            ],
          ),
        )
      ],
    );
  }

  Widget _buildShowDatePicker(BuildContext context) {
    final currentDate = DateTime.now();
    return DatePickerDialog(
      initialDate: currentDate,
      // 初始化选中日期
      firstDate: DateTime(currentDate.year - 1),
      // 开始日期
      lastDate: DateTime(currentDate.year, currentDate.month + 1, currentDate.month - 1),
      // 结束日期
      initialEntryMode: DatePickerEntryMode.calendarOnly,
      // 日历弹框样式

      currentDate: currentDate,
      // 当前日期
      cancelText: LocaleKeys.cancel.ts,
      // 取消按钮文案
      confirmText: LocaleKeys.ok.ts, // 确认按钮文案
    );
  }
}
